<template>
  <el-row class="cur_system">
    <module-title :cn_name="'课程体系'" :en_name="'CURRICULUM SYSTEM'" :mname="'cur_system'" ></module-title>

    <el-row >
      <transition-group
        name="flip-list"
        v-on:before-enter="beforeIconEnter"
        v-on:enter="iconEnter"
      >
        <el-col :span="8"  class="cur_system_row" v-for="item in iconData" v-bind:key="item" v-if="iconMove">
          <router-link :to="{path: '/Course'}">
          <div :class="item.classNames" ></div>
          <p class="system_title" >{{item.titleName}}</p>
          </router-link>
        </el-col>

      </transition-group>

    </el-row>


  </el-row>
</template>
<script>
  import ModuleTitle from '../Common/module-title'
  export default {
    data(){
      return {
        iconMove : false,
        iconData : [
          {classNames : 'ms-icon ms-icon-computer ms-icon-big' , titleName : '互联网视觉'},
          {classNames : 'ms-icon ms-icon-phone ms-icon-big' , titleName : 'UI设计'},
          {classNames : 'ms-icon ms-icon-html5 ms-icon-big' , titleName : '前端开发'},
          {classNames : 'ms-icon ms-icon-php ms-icon-big' , titleName : 'PHP开发'},
          {classNames : 'ms-icon ms-icon-world ms-icon-big' , titleName : '网站开发'},
          {classNames : 'ms-icon ms-icon-clock ms-icon-big' , titleName : '更多'}
        ]
      }
    },
    components : {ModuleTitle},
    props:['cur_system'],
    methods : {
      beforeIconEnter (el) {
        Velocity(el, { opacity: 0}, { duration: 0 })
      },
      iconEnter(el , done){
        Velocity(el, { opacity: 0.2 , translateY : '500px'}, { duration: 200 })
        Velocity(el, { opacity: 0.5 , translateY : '0px'}, { duration: 1000 })
        Velocity(el, { opacity: 1 , translateY : '0px'}, { duration: 1500  , complete: done})
      },
      windowScrolls () {
        if (this.$el.offsetTop < window.scrollY + 300 ) {
          this.iconMove = true;
        }
      }
    },
    mounted(){
      window.addEventListener('scroll', this.windowScrolls)
      if (this.$el.offsetTop < window.scrollY + 300 )
        this.iconMove = true;
    }
  }
</script>
<style>
   #app .cur_system_row div:hover,#app .cur_system_row a:hover {
    color : #f39800!important;
    cursor: pointer;
  }
  .cur_system_row a {
    color: #000;
    text-decoration: none;
  }
  .cur_system {
    height : 500px;
  }
  .cur_system_row {
    margin-bottom : 1.5em;
  }
</style>
